말하면, 만들어집니다

Vibe Coding

말하면,
만들어집니다.

2026년 9월

오늘의 약속

2시간 뒤,
여러분이 만든 앱이
브라우저에서 돌아갑니다.

코드를 한 줄도 직접 쓰지 않고요.

강사

이창민

(주)온텔리에이아이 연구소장

요즘 하루의 절반은 AI에게 말로 시키고,
나머지 절반은 AI가 한 걸 확인하면서 보냅니다.

오늘의 순서

앞의 25분은 지루하지만 꼭 필요하고,
뒤의 40분은 여러분이 직접 만드는 시간입니다.

00:00 – 00:08

시작하며

00:08 – 00:33

VS Code에
Claude 붙이기

00:33 – 01:00

바이브 코딩,
정확히 뭘까

10분

쉬는
시간

01:10 – 01:48

실습 · 그래프 탐색기

01:48 – 02:00

마무리

시작하기 전에

코드를 써 봤든, 안 써 봤든
오늘은 별로 중요하지 않습니다.

오히려 코드를 모르는 쪽이 더 빨리 익히는 경우도 많습니다.

오늘 하루 종일 할 말

코드는 몰라도 됩니다.
원하는 걸 정확히 말할 줄 알면 됩니다.

뭘 만들지, 어떤 조건이 있는지, 됐는지 어떻게 확인할지.
이 세 가지를 문장으로 쓰는 게 오늘 배우는 기술의 전부입니다.

Part 1 · 25분

VS Code에
Claude 붙이기

노트북 열어 주세요.

준비물

세 가지만 있으면 됩니다.

VS Code

이미 설치되어 있어요.
1.94 이상이면 됩니다.

Claude 계정

학교에서 나눠드린 계정.
메일함에서 초대 링크 확인.

빈 폴더 하나

바탕화면에 vibe-day1
폴더를 만들어 두세요.

Step 1 · 확장 설치

Ctrl + Shift + X 누르고,
"Claude Code" 검색, Install.

EXTENSIONS: MARKETPLACE

🔍 Claude Code

Claude Code · Anthropic
Claude Code brings the power of Claude to your editor…

Install

설치 후 아이콘이 안 보이면 → Ctrl+Shift+P → "Reload Window"

Step 2 · 로그인

F1 → Claude Code: Open in New Tab →
브라우저에서 학교 계정으로 → 다시 VS Code로.

1F1 누르고 "Claude Code: Open in New Tab" 선택

2주황색 Claude.ai Subscription 버튼 → "브라우저를 열까요?" → Open

3브라우저에서 학교에서 준 계정으로 로그인 → Authorize

4VS Code로 돌아오면 Claude 채팅창이 활성화됨 = 성공

Step 3 · 작업실 열기

File → Open Folder → vibe-day1

"이 폴더의 작성자를 신뢰합니까?" 라고 물으면 Yes.
여러분이 방금 만든 폴더니까요.

EXPLORER

▾ VIBE-DAY1

(비어 있음)

Step 4 · 첫 대화

패널에 한 줄 치고 엔터.

지금 이 폴더에 뭐가 있어? 그리고 너는 뭘 할 수 있어?

대답이 돌아오면 세팅은 끝입니다. 안 되는 분은 저에게 알려 주세요. 자리로 가겠습니다.

화면 읽는 법

이 다섯 개만 알면 됩니다.

✱ Claude Code

① 세션 기록 (위쪽 시계 아이콘) · 이전 대화로 돌아가기

② 여기에 말합니다. @파일명 으로 파일을 지목할 수 있어요 ④

③ Auto⑤ Claude Opus 5컨텍스트 12%

권한 모드

Claude가 얼마나 마음대로 할지, 여러분이 정합니다.

오늘은 이걸로

Auto

대부분 알아서 고치고 실행. 위험한 것만 물어봄. 빠릅니다.

확인하고 싶을 때

Manual

파일 고치기 전에 매번 물어봄. 뭘 바꾸는지 보고 싶으면.

큰 일 시킬 때

Plan

먼저 계획서만 씀. 읽고 승인해야 손을 댐. 실습 후반에 써봅니다.

손에 익히면 좋은 것

단축키는 셋이면 충분합니다.

⌨Shift+Enter 줄바꿈 (그냥 Enter는 전송)

⌨Ctrl+Esc 편집기 ↔ Claude 입력창 포커스 이동

⌨Alt+K 코드 드래그한 뒤 누르면 그 부분을 @로 지목

/입력창에 / 치면 명령 목록 /clear 새 대화 · /usage 남은 사용량

막혔을 때

오늘 나올 수 있는 사고는 이 세 가지입니다.

Claude 창이 안 보여요

F1 → Claude Code: Open in New Tab.
그래도 안 되면 Reload Window.

로그인이 계속 떠요

입력창에 /login.
브라우저에 다른 계정이 로그인돼 있는지 확인.

아무 반응이 없어요

/usage로 한도 확인.
5시간 단위로 사용량이 차면 잠시 멈춥니다.

Part 2 · 27분

바이브 코딩,
정확히 뭘까

노트북은 잠깐 덮어도 됩니다.

2025년 2월

"분위기에 완전히 몸을 맡기고, 코드가 존재한다는 사실 자체를 잊어버리는 새로운 종류의 코딩." Andrej Karpathy · 전 Tesla AI 총괄, OpenAI 창립 멤버 · "vibe coding"이라는 말을 처음 쓴 트윗에서

그 뒤 1년 반

장난처럼 시작된 단어가 이렇게 됐습니다.

9개월

트윗에서 사전까지.
콜린스 사전 2025년 올해의 단어

2025.11

25%

Y Combinator 2025년 겨울 배치 스타트업 중
코드의 95%를 AI가 쓴 회사 비율

YC · 2025.03

3번

이 강의. 국내 대학들이 올해
비교과 과정으로 앞다퉈 개설

2026.09

AI 코딩의 세 단계

자동완성 → 채팅에서 복붙 → 에이전트가 직접

2021~

한 줄 자동완성

내가 치면 다음 줄을 제안. 여전히 내가 코드를 씀.

2023~

채팅에 물어보고 복붙

ChatGPT에 물어서 답을 붙여넣기. 어디에 붙일지는 내가 알아야 함.

2025~ · 오늘 우리

에이전트가 직접

파일을 만들고, 실행하고, 에러를 읽고, 다시 고침. 나는 말하고 확인만.

왜 지금 가능해졌나

AI가 말만 하다가, 손이 생겼습니다.

파일을 읽고 쓴다

여러분 폴더 안의 파일을 직접 열어 보고, 만들고, 고칩니다.

명령을 실행한다

프로그램을 돌려 보고, 설치하고, 테스트합니다.

결과를 읽는다

실행 결과와 에러 메시지를 읽고 다음에 뭘 할지 스스로 정합니다.

오래 기억한다

프로젝트 전체를 한 번에 머리에 넣고 일합니다.

2년 전 챗봇은 입만 있었습니다. 지금 에이전트는 손과 눈이 있습니다.

안에서는 이런 일이 일어납니다 · 리허설 기록 그대로

"그래프 도구 만들어줘" 한 마디에, 에이전트는 이만큼 움직입니다.

나index.html로 수식 넣으면 그래프 그려주는 페이지 만들어줘
Claude폴더 확인빈 디렉토리네요. 파일 하나에 다 담겠습니다.
Claude파일 쓰기index.html 654줄 생성
Claude테스트수식 파서를 따로 돌려 봄 → "x +" 같은 틀린 입력도 확인
Claude실패테스트 스크립트가 안 돎 → 원인 찾아 임시 파일로 다시 실행
Claude브라우저 열기직접 index.html을 열어 봄
Claude완료했습니다. 여는 법 세 가지와, 제가 판단한 점을 정리하면…

바이브 코딩의 전부

말한다→ 만든다→ 본다→ 다시 말한다

이 네 단어를 돌리는 게 전부입니다.
"다시 말한다"는 결과를 보고 수정사항을 지시하는 것. 오늘 실습에서 최소 열 바퀴 돌게 될 거예요.

사실은 두 가지가 섞여 있습니다

코드를 안 보는 바이브 코딩과, 코드를 보는 AI 개발.

오늘 우리

순수 바이브 코딩

코드를 열어 보지 않는다. 결과만 본다. 되면 된 것. 개인 도구, 프로토타입, 배우는 단계에 딱 맞음.

점점 이쪽으로

AI 보조 개발

AI가 쓴 코드를 읽고 검토한다. 남이 쓰는 서비스, 돈이 오가는 것, 오래 유지할 것에는 이게 필요.

둘 다 같은 도구, 같은 루프. 차이는 "본다"에서 뭘 보느냐뿐입니다.

요즘 사람들이 이걸로 만드는 것

거창한 게 아닙니다. 나한테 필요한 작은 것부터.

나만의 페이지

포트폴리오, 동아리 소개, 링크 모음, 청첩장

반복 업무 자동화

엑셀 정리, 파일 이름 일괄 변경, 메일 초안

데이터 보기

설문 결과 그래프, 가계부 분석, 공공데이터 지도

봇

디스코드 출석 봇, 카톡 알림, 과제 마감 알리미

작은 게임

퀴즈, 2048, 타자 연습, 룰렛

공통점: 예전엔 "개발자한테 부탁해야 했던" 것들. 이제는 저녁에 혼자 만듭니다.

2026년 9월, 지금의 도구들

크게 두 부류입니다.

앱 빌더

Lovable · Bolt · Replit · v0

브라우저에서 설명만 하면 앱이 통째로 나옴. 빠르지만 내 손에 파일이 없고, 조금만 벗어나면 막힘.

코딩 에이전트

Claude Code · Cursor · Codex · Copilot

내 컴퓨터의 내 폴더에서 일함. 파일이 내 손에 있고, 어디까지든 확장 가능. 오늘 우리는 이쪽.

이름은 내년에 바뀌어 있을 겁니다. 두 부류의 차이는 안 바뀝니다.

왜 이 조합인가

VS Code + Claude Code를 고른 이유

파일이 내 컴퓨터에 있다 → 뭘 만들었는지 언제든 열어볼 수 있다
계획을 먼저 보여준다 → Plan 모드. 큰 일은 개요부터 검토
되돌릴 수 있다 → 망쳐도 이전 상태로 복구
학교가 계정을 준다 → 오늘 돈 걱정 없이 마음껏

이렇게 생각하면 편합니다

아주 빠르고 뭐든 할 줄 아는데,
우리 사정은 하나도 모르는 동료.

그래서 사정을 말해 줘야 합니다. 뭘 원하는지, 뭐는 하면 안 되는지, 어떻게 확인할지.

솔직하게

잘 되는 것과, 아직 안 되는 것.

잘 됩니다

웹페이지, 작은 앱, 프로토타입
반복 작업 스크립트
흔한 기술로 만드는 흔한 것
"이거 왜 안 돼?"를 대신 찾아주기

아직 조심

내가 뭘 원하는지 나도 모를 때
결제, 개인정보, 보안이 걸린 것
맞는지 내가 확인할 수 없는 것
거대한 기존 코드를 처음 만질 때

가장 많이 받는 질문 1

"코드 진짜 몰라도 돼요?"

쓰는 건 몰라도 됩니다. 읽는 것도 저절로 되진 않습니다.
대신 물어보는 법을 익히게 됩니다.
"이 파일이 뭘 하는지 설명해줘", "선 색을 바꾸려면 어디를 고쳐야 해?"

이걸 반복하면 코드 대신 "어디에 뭐가 있는지"가 눈에 들어옵니다. 개인 도구를 만드는 데는 그 정도면 충분합니다.

가장 많이 받는 질문 2

"AI가 틀리면요?"

틀립니다. 자주. 그래서 루프에 "본다"가 들어 있어요.
그리고 처음부터 확인 방법을 같이 말해 주면 훨씬 덜 틀립니다.

sin(x)/x 그래프 그려줘. x=0 근처에서 값이 1에 가까워지는지 확인해서 알려줘.

쉬는 시간

10분

VS Code는 켜 둔 채로.
돌아오면 바로 만듭니다.

Part 3 · 38분

실습 ·
그래프 탐색기

지금부터 한 줄도 직접 안 씁니다.

오늘 만들 것

수식을 넣으면 그래프가 그려지고, 슬라이더로 모양을 바꾸고,
마음에 드는 수식은 저장해 뒀다가 다시 불러오는 페이지.

index.html — 브라우저

f(x) = a * sin(b * x)그리기저장

a = 1.0 ───●────b = 2.0 ──────●─저장됨: x^2 · sin(x)/x · a*sin(b*x)

Round 1 · 6분

일단 뜨게 만든다.

index.html 파일 하나로 함수 그래프 그리는 웹페이지를 만들어줘. 사용자가 f(x)를 텍스트로 입력하면 (예: x^2 - 3*x + 1) x가 -10부터 10까지 그래프를 그려줘. 외부 라이브러리 없이 순수 HTML, CSS, JavaScript로. 다 만들면 브라우저에서 어떻게 여는지도 알려줘.

Claude가 브라우저를 직접 열어 주기도 합니다.
안 열리면 → 탐색기에서 index.html 우클릭 → Reveal in File Explorer → 더블클릭.

Round 2 · 8분

기능은 한 번에 하나씩 붙인다.

a와 b 슬라이더를 추가해줘. 수식에서 a, b를 쓸 수 있게 하고 (예: a*sin(b*x)), 슬라이더를 움직이면 그래프가 즉시 다시 그려지게. 슬라이더 옆에 현재 값을 숫자로 보여줘.

브라우저에서 F5 새로고침. 바뀐 게 안 보이면 Ctrl+F5.

Round 3 · 8분

일부러 어려운 걸 시켜서, 다시 말하는 연습을 한다.

"저장" 버튼을 추가해줘. 누르면 지금 수식과 a, b 값이 아래 목록에 저장되고, 목록에서 클릭하면 그 수식이 다시 그려지게. 브라우저를 닫았다 열어도 목록이 남아 있게 해줘. 새로고침 뒤에도 목록이 남는지 확인해서 알려줘. 확인은 코드만 보고 간단히.

뭔가 이상하면 그대로 말하세요. "목록이 사라져", "클릭해도 안 그려져".
화면을 캡처한 뒤 스크린샷 파일을 첨부해서 보여줘도 됩니다.

오래 걸릴 때

"확인해줘" 한 마디에 Claude는 테스트 코드까지 직접 짜서 돌려 보기도 합니다.

기다릴 수 있으면

구경하세요

패널에서 테스트 스크립트를 쓰고, 실행하고, 결과를 읽고, 다시 고치는 과정이 흘러갑니다. 이게 아까 말한 "손이 생긴" AI예요.

시간이 없으면

■ 정지, 그리고 한 줄

"테스트는 그만하고, 지금까지 만든 걸 저장한 뒤 결과만 알려줘."
다음부턴 프롬프트 끝에 "확인은 간단히"를 붙이세요.

단, Claude가 여러분 브라우저를 열어 직접 눌러 보지는 않습니다. 그리고 리허설 때 Claude의 테스트는 처음에 틀린 결과를 보고했다가 스스로 정정했습니다.
AI의 확인도 틀릴 수 있습니다. 그래서 브라우저에서 새로고침 한 번 눌러 보는 마지막 확인은 여러분이 합니다.

망쳐도 됩니다

되돌리기는 두 가지.

방금 한 걸 무르기

말로 시킨다

"방금 바꾼 거 취소하고 그 전으로 되돌려줘."
Claude가 자기가 뭘 바꿨는지 기억하고 있습니다.

한참 전으로

체크포인트로 감기

Claude가 파일을 고칠 때마다 상태를 저장해 둡니다. 대화에서 그 시점 메시지로 돌아가 "여기부터 다시" 할 수 있어요.

그래서 오늘은 마음껏 망쳐 보세요. 망친 만큼 배웁니다.

Round 4 · Plan 모드 · 6분

큰 일은 계획서부터 받는다.

1입력창 아래 "Auto" 클릭 → Plan 선택

2큰 요청 하나: "도함수를 점선으로 같이 그리기, 극값 자동 표시, 다크모드를 추가해줘"

3계획서가 문서로 열림 → 읽는다 → 마음에 안 드는 줄에 코멘트

4승인하면 그때부터 손을 댐

오늘의 핵심

좋은 프롬프트에는 세 가지가 있습니다.

그래프 좀 예쁘게 해줘

[목표] 그래프 선을 더 두껍게 하고 축에 눈금 숫자를 붙여줘. [제약] 파일은 그대로 하나로, 라이브러리 추가 없이. [확인] x=0, y=0 눈금이 정확히 원점에 오는지 코드에서 확인해서 알려줘.

남은 시간 · 자유

하나만 더 붙여 보세요. 취향대로.

두 함수 비교

g(x)도 입력받아 겹쳐 그리고, 만나는 점을 표시.

이미지로 저장

버튼 하나로 지금 그래프를 PNG 파일로 내려받기.

움직이는 그래프

재생 버튼을 누르면 a가 천천히 변하면서 그래프가 춤추게.

막히면 옆 사람 화면을 보세요. 프롬프트가 다르면 결과가 어떻게 다른지 비교하는 것도 공부입니다.

마무리 · 12분

오늘 배운 것

세 줄 요약

바이브 코딩은 말한다 → 만든다 → 본다 → 다시 말한다를 돌리는 것
한 번에 하나씩. 큰 건 Plan으로 계획서부터
프롬프트엔 목표 · 제약 · 확인. 특히 확인.

그리고 하나 더. 망쳐도 됩니다. 되돌리면 되니까.

말하면, 만들어집니다.
확인은 여러분이 합니다.

질문 받겠습니다.